<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增用户</title>
    <link rel="stylesheet" href="./css/style.css">
    <!--引入vue相关的js文件-->
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
</head>
<body>
<div class="container" id="app">
    <h2>新增用户</h2>
    <form id="addUserForm" action="javascript:void(0)">
        <!-- <div class="form-group">
             <label for="empId">用户编号</label>
             <input type="text" id="empId" name="empId" required>
         </div>-->
        <div class="form-group">
            <label for="nickname">昵称</label>
            <input v-model="addUserData.nickname" type="text" id="nickname" name="nickname" required>
        </div>
        <div class="form-group">
            <label for="gender">性别</label>
            <input v-model="addUserData.gender" type="text" id="gender" name="gender" required>
        </div>
        <div class="form-group">
            <label for="contact">联系方式</label>
            <input v-model="addUserData.contact" type="text" id="contact" name="contact" required>
        </div>
        <div class="form-group">
            <label for="birthday">生日</label>
            <input v-model="addUserData.birthday" type="date" id="birthday" name="birthday" required>
        </div>
        <div class="form-group">
            <label for="career_direction">目标职业</label>
            <input v-model="addUserData.career_direction" type="text" id="career_direction" name="career_direction"
                   required>
        </div>
        <div class="form-group">
            <label for="graduation_year">毕业年份</label>
            <input v-model="addUserData.graduation_year" type="text" id="graduation_year" name="graduation_year"
                   required>
        </div>
        <div class="form-group">
            <label for="user_password">密码</label>
            <input v-model="addUserData.user_password" type="text" id="user_password" name="user_password" required>
        </div>
        <button type="submit" @click="addUser">保存</button>
    </form>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            addUserData: {
                nickname: '',
                gender: '',
                contact: '',
                birthday: '',
                career_direction: '',
                graduation_year: '',
                user_password: ''
            }
        },
        methods: {
            addUser: function () {
                axios({
                    url: "/pns/addUser",
                    method: "get",
                    params: this.addUserData
                }).then(result => {
                    let code = result.data.code;
                    if (code == "200") {
                        //重新查询
                        location.href = "/pns/main.html";
                    } else {
                        //给出失败原因
                        alert(result.data.msg);
                    }
                });
            }
        }
    });
</script>
</body>
</html>